<template>
  <div style="text-align: left" v-if="showBtn">
  <el-button @click="deleteArticlesById" size="small" type="primary">
    <el-icon><Delete/></el-icon>&nbsp;
    批量删除</el-button>
  </div>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="40"> </el-table-column>
    <el-table-column type="expand">
      <template #default="scope">
        <el-descriptions :column="2" border title="文章信息">
          <el-descriptions-item label="文章标题">{{ scope.row.articleTitle }}</el-descriptions-item>
          <el-descriptions-item label="文章类型"><el-tag type="success">{{ articleTypes[scope.row.articleType] }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="作者id">{{ scope.row.userId }}</el-descriptions-item>
          <el-descriptions-item label="阅读量">{{scope.row.views}}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ scope.row.publishTime }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-table-column>
    <el-table-column label="标题" width="140">
      <template #default="scope">
        <router-link class="RLink" :to="`/showArticle/${scope.row.articleId}`">
          {{ scope.row.articleTitle.length>8 ? scope.row.articleTitle.substring(0,8)+'...' : scope.row.articleTitle }}
        </router-link>
      </template>
    </el-table-column>
    <el-table-column prop="publishTime" label="发布日期" show-overflow-tooltip />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="deleteArticleById(scope.row.articleId)" type="primary">
          <el-icon><Delete/></el-icon>&nbsp;
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :pager-count=5
  >
  </el-pagination>
</template>

<script>
import {getDevice} from "@/utils/get-device";
import {deleteArticle, deleteArticles, getArticleByPage} from "@/api/multimedia";
import {Delete} from "@element-plus/icons";

export default {
  name: "TableList",
  components: {Delete},
  props:['articleType'],
  data(){
    return{
      articleTypes: { 'NEWS':'新闻','ANNOUNCE':'公告'},
      tableData: [],
      currentPage:1,
      pageSize:10,
      layout:'total, sizes, prev, pager, next, jumper',
      total:0,
      showBtn:false,
      listDelete:[]
    }
  },
  created() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
  },
  watch:{
    articleType:{
      handler(){
        this.getArticleByType()
      },
      immediate:true
    }
  },
  methods:{
    //删除一篇文章
    deleteArticleById(articleId){
      deleteArticle(articleId).then(()=>{
        this.getArticleByType()
      })
    },
    //多选
    handleSelectionChange(select){
      this.showBtn = select.length > 1;
      this.listDelete=select
    },
    //批量删除
    deleteArticlesById(){
      const ids=[]
      this.listDelete.forEach(article =>{
        ids.push(article.articleId)
      })
     deleteArticles(ids).then(()=>{
       this.getArticleByType()
     })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getArticleByType()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getArticleByType()
    },
    getArticleByType(){
      if (this.articleType==='NEWS')
        getArticleByPage(this.currentPage,this.pageSize,1).then(response=>{
          const {total,news}=response.data
          this.total=total
          this.tableData=news
        }).catch(()=>{
          this.$notify({
            type:"error",
            message:'获取文章失败',
            duration:2000
          })
        })
      else {
        getArticleByPage(this.currentPage,this.pageSize,0).then(response=>{
          const {total,news}=response.data
          this.total=total
          this.tableData=news
        }).catch(()=>{
          this.$notify({
            type:"error",
            message:'获取文章失败',
            duration:2000
          })
        })
      }
    }
  }

}
</script>

<style lang="less" scoped>
.RLink{
  padding: 4px;
  text-decoration: none;
  color: #000000;
&:hover{
   color: #666;
 }
}
</style>
